import {Component} from 'react'
import Taro from '@tarojs/taro'
import {View, Text, Picker} from '@tarojs/components'

import 'taro-ui/dist/style/index.scss'
import {
  AtButton,
  AtSearchBar,
  AtIcon,
  AtList,
  AtCalendar,
  AtTabs,
  AtTabsPane,
  AtTabBar
} from 'taro-ui'

import "taro-ui/dist/style/components/button.scss" // 按需引入
import '../index/index.less'
import './appointment.less'

export default class AppointmentInfo extends Component {
  state = {
    value: "",
    timeSel: '12:01',
    dateSel: '2020-9-22',
    current: 0,
    weekStart: '2020-9-20',
    weekNow: '2020-9-22',
    weekEnd: '2020-9-26'

  }

  /*搜索*/
  onSearch(value) {
    this.setState({
      value: value
    })
  }

  onActionClick() {
    console.log('开始搜索')
  }

  /*日历选择*/
  onChange = e => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value]
    })
  }
  onTimeChange = e => {
    this.setState({
      timeSel: e.detail.value
    })
  }
  onDateChange = e => {
    this.setState({
      dateSel: e.detail.value
    })
  }

  /*页面切换*/
  handleClick(value) {
    this.setState({
      current: value
    })
  }

  /*跳转*/
  toAppointmentInfo() {
    Taro.navigateTo({
      url: '/pages/appointment/appointmentMoreInfo'
    })
  }

  render() {
    var tabList = [{title: "首页", iconType: "home"}, {title: "我的", iconType: "user"}]
    return (
      <View className='appointment'>
        <AtTabBar
          fixed
          tabList={tabList}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
        />
        <AtTabs current={this.state.current} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0}>
            <View style='padding: 10px 0px;background-color: #FAFBFC;text-align: center;'>
              <AtSearchBar
                actionName='搜索'
                value={this.state.value}
                onChange={this.onSearch.bind(this)}
                onActionClick={this.onActionClick.bind(this)}
              />
              <AtCalendar currentDate={this.state.weekNow} minDate={this.state.weekStart} maxDate={this.state.weekEnd}
                          />

              <AtList hasBorder={false}>
                <View className='my-card'>
                  <View className='my-card-picture'>
                    <AtIcon></AtIcon>
                  </View>
                  <View className='my-card-item'>
                    <View className='my-info'><Text>姓名 </Text><Text className='my-info-title my-info-padding-left'> 主任医师</Text></View>
                    <View className='my-info'><Text className='my-info-title'>擅长治疗：xxx</Text></View>
                    <View className='my-info'><Text className='my-info-title'>时间 周几 上午</Text></View>
                    <View className='my-info'>
                      <View className='my-info-left'>
                        <Text className='my-info-title'>已预约 人数</Text>
                      </View>
                      <View className='my-info-right'>
                        <AtButton className='themeColor' type='primary' size='small' circle='true'
                                  onClick={this.toAppointmentInfo}>挂号</AtButton>
                      </View>
                    </View>
                  </View>
                </View>
              </AtList>
            </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
          </AtTabsPane>
        </AtTabs>

      </View>
    )
  }
}
